<template>
  <div class="search-route-site-page">
    <search v-bind:searchData="searchData" v-on:searchEvent="searchEventMethod"></search>
    <!-- 常用线路站点列表 -->
    <div class="used-route-site-page" v-if="isShow === 1" style="float: left;width: 100%;">
      <div class="route-item" v-for="item in usedLineSiteData">
        <div class="route-item-container" v-on:click="getDetails(item)">
          <img class="route-item-bus" v-if="item.type === 1" src="../../assets/image/bus-gray-icon.png"/>
          <img class="route-item-bus" v-if="item.type === 2" src="../../assets/image/bus-site-gray-icon.png"/>
          <span class="route-item-name">{{item.name }}</span>
          <span class="route-item-direction">{{item.direction}}</span>
          <img class="route-item-arrow" src="../../assets/image/right-arrow-icon.png"/>
        </div>
      </div>
    </div>
    <div class="used-route-site-page" v-if="isShow === 2" style="float: left;width: 100%;">
      <div class="route-item">
        <div class="route-item-container">
          <span class="route-item-direction">暂无查询结果</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import search from '../common/Search.vue';

export default {
  data () {
    return {
      searchData: {
        placeholder: '请输入线路编号或站点名称',
        isPullDown: true,
        page: this.$global.SEARCH_ROUTE_SITE
      },
      usedLineSiteData: {},
      isShow: 1
    };
  },
  created () {
    let param = {};
    var vueObj = this;
    this.$baseService.getData(vueObj.$global.API_GET_USER_ROUTE_SITE, param, function (data) {
      vueObj.usedLineSiteData = Object.assign({}, vueObj.usedLineSiteData, data);
    });
    if (this.$storage.setStorage('intervalID')) {
      clearInterval(this.$storage.setStorage('intervalID'));
    }
  },
  methods: {
    /*
    点击进入线路or站点详情
     */
    getDetails: function (item) {
      let routerPath;
      let param = {};
      if (item.type === 1) {
        param.routeName = item.name;
        param.direction = item.direction;
        param.areacode = item.areacode;
        param.updown = item.updown;
        this.$storage.setStorage('lineDetails', param);
        routerPath = '/lineDetails';
      } else if (item.type === 2) {
        param.name = item.name;
        param.areacode = item.areacode;
        this.$storage.setStorage('searchSiteDetailParam', param);
        routerPath = '/siteDetails';
      }
      this.$router.push({path: routerPath});
    },
    /*
    触发搜索事件，隐藏常用线路、站点列表DIV
     */
    searchEventMethod: function (flag) {
      this.isShow = flag;
    }
  },
  components: {
    search
  }
};
</script>

<style scoped>
  .search-route-site-page{
    margin-top: 0.26rem;
  }

  .used-route-site-page {
    margin-top: 0.26rem;
  }

  .route-item{
    background-color: white;
  }

  .route-item-container{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-left: 0.4rem;
    height: 1.25rem;
  }

  .route-item-bus{
    width: 0.42rem;
    height: 0.45rem;
    align-self: center;
  }

  .route-item-name{
    padding-left: 0.26rem;
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
  }

  .route-item-arrow{
    width: 0.21rem;
    height: 0.37rem;
    align-self: center;
    margin-right: 0.4rem;
  }

  .route-item-direction{
    padding-left: 0.26rem;
    font-size: 0.37rem;
    color: #666666;
    align-self: center;
    flex: 1;
  }
</style>
